<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8' />
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
    <script type="text/javascript" src="../../../../x3dom-include.js"></script>
    <script>
        document.onload=function(){
            document.getElementById("shape").addEventListener("click", function(e){
                console.log("click");
                document.getElementById("result_trafo").setAttribute('translation', e.hitPnt[0]+" 2.0 "+e.hitPnt[2]);
                document.getElementById("result").setAttribute('string', e.hitPnt.map(v => v.toFixed(2)));
                var msg = "hit point: " + e.hitPnt;
                msg += " | layerXY: "+e.layerX+" "+e.layerY;
                console.log(e);
                document.getElementById("test-result").innerHTML = msg;
                document.getElementById("anno2d").style.left = e.layerX+'px';
                document.getElementById("anno2d").style.top = e.layerY+'px';
                document.getElementById("anno2d").innerHTML = e.layerX+" "+e.layerY;
            }, false);
        };
    </script>
    <title>Picking</title>
</head>
<body>
<x3d width="800px" height="600px" id="x3d">
    <scene>
        <Transform id="trans" translation="0 0 0">
            <Shape id="shape">
                <appearance>
                    <material diffusecolor="0 1 0.2" ></material>
                </appearance>
                <box></box>
            </Shape>
        </Transform>
        <Transform id="result_trafo" translation="0 2 0">
            <shape id="the_shape">
                <appearance>
                    <material diffuseColor='0 0 0' specularColor='0 0 0'></material>
                </appearance>
                <text id="result" string='location' solid='false'>
                    <fontstyle justify="MIDDLE" style="BOLD" size="0.3" quality="5"></fontstyle>
                </text>
            </shape>
        </Transform>
    </scene>
</x3d>
<p id="test-result">10</p>
<span id="anno2d" style="position: absolute; border: solid 2px; z-index: 10; padding: 6px; line-height: 1.5; opacity: 0.7; text-align: center;">
        screenXY
</span>
</body>
</html>
